<template>
  <div class="genre-management">
    <!-- 页面头部 -->
    <div class="page-header-container">
      <el-card class="page-header-card" shadow="never">
      <el-row :gutter="20" type="flex" justify="space-between" align="middle">
        <el-col :span="16">
          <div class="header-content">
            <h1 class="page-title">📖 小说类型管理</h1>
            <p class="page-description">管理小说类型及其相关的提示词和标签</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="header-actions">
            <el-button type="primary" @click="showCreateDialog = true">
              <el-icon><Plus /></el-icon>
              添加新类型
            </el-button>
          </div>
        </el-col>
      </el-row>
      </el-card>
    </div>

    <!-- 类型列表 -->
    <div class="genres-container">
      <div 
        class="genres-grid" 
        v-loading="loading" 
        element-loading-text="正在加载小说类型..."
      >
        <div
          v-for="genre in genres"
          :key="genre.code"
          class="genre-card"
        >
        <el-card shadow="hover" class="genre-item">
          <div class="genre-header">
            <div class="genre-info">
              <h3 class="genre-name">
                <span class="genre-icon">{{ genre.icon }}</span>
                {{ genre.name }}
                <el-tag 
                  v-if="genre.isDefault === 1 || genre.isDefault === true" 
                  type="warning" 
                  size="small" 
                  style="margin-left: 8px;"
                >
                  默认类型
                </el-tag>
              </h3>
              <el-tag size="small" type="info">{{ genre.code }}</el-tag>
            </div>
            <div class="genre-actions">
              <el-button 
                size="small" 
                type="primary" 
                @click="editGenre(genre)"
                :disabled="!canEditGenre(genre)"
              >
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-dropdown @command="(cmd) => handleGenreAction(cmd, genre)">
                <el-button size="small" type="text">
                  <el-icon><MoreFilled /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="duplicate">
                      <el-icon><CopyDocument /></el-icon>
                      复制
                    </el-dropdown-item>
                    <el-dropdown-item 
                      divided 
                      command="delete" 
                      :disabled="!canDeleteGenre(genre)"
                    >
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          
          <div class="genre-description">
            <p>{{ genre.prompt }}</p>
          </div>
          
          <div class="genre-tags">
            <el-tag 
              v-for="tag in genre.tags.slice(0, 5)" 
              :key="tag"
              size="small"
              style="margin: 2px 4px 2px 0;"
            >
              {{ tag }}
            </el-tag>
            <el-tag v-if="genre.tags.length > 5" size="small" type="info">
              +{{ genre.tags.length - 5 }}
            </el-tag>
          </div>
          
          <div class="genre-meta">
            <div class="meta-item">
              <el-icon><Calendar /></el-icon>
              <span>{{ formatDate(genre.createdAt) }}</span>
            </div>
            <div class="meta-item" v-if="genre.usageCount">
              <el-icon><Document /></el-icon>
              <span>已使用 {{ genre.usageCount }} 次</span>
            </div>
            <div class="meta-item" v-if="genre.isDefault">
              <el-tag type="warning" size="small">系统预设</el-tag>
            </div>
          </div>
        </el-card>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="genres.length === 0" class="empty-state">
      <el-empty description="暂无类型，创建第一个小说类型吧！">
        <el-button type="primary" @click="showCreateDialog = true">创建类型</el-button>
      </el-empty>
    </div>

    <!-- 创建/编辑类型对话框 -->
    <el-dialog 
      v-model="showCreateDialog" 
      :title="editingGenre ? '编辑类型' : '创建新类型'"
      width="600px"
      @close="resetForm"
    >
      <el-form 
        ref="formRef" 
        :model="genreForm" 
        :rules="genreRules" 
        label-width="100px"
      >
        <el-form-item label="类型代码" prop="code">
          <el-input 
            v-model="genreForm.code" 
            placeholder="例如：urban, fantasy" 
            :disabled="editingGenre?.isDefault"
          />
          <div class="form-tip">用于程序识别的英文代码，不可重复</div>
        </el-form-item>
        
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="genreForm.name" placeholder="例如：都市、玄幻" />
        </el-form-item>
        
        <el-form-item label="创作提示" prop="prompt">
          <el-input 
            v-model="genreForm.prompt" 
            type="textarea" 
            :rows="4"
            placeholder="描述这个类型的创作特点和要求..."
          />
        </el-form-item>
        
        <el-form-item label="关键标签" prop="tags">
          <div class="tags-input-section">
            <el-input 
              v-model="tagInput"
              placeholder="输入标签后按回车添加"
              @keyup.enter="addTag"
            >
              <template #append>
                <el-button @click="addTag">添加</el-button>
              </template>
            </el-input>
            <div class="tags-display" v-if="genreForm.tags.length > 0">
              <el-tag 
                v-for="(tag, index) in genreForm.tags"
                :key="index"
                closable
                @close="removeTag(index)"
                style="margin: 4px 4px 0 0;"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-form-item>
        
        <el-form-item label="示例作品" prop="examples">
          <el-input
            v-model="genreForm.examples"
            type="textarea"
            :rows="2"
            placeholder="列举一些典型的作品或作者（可选）"
          />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="类型图标" prop="icon">
              <EmojiPicker v-model="genreForm.icon" />
              <div class="form-tip">选择用于显示的emoji图标</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主题颜色" prop="color">
              <el-color-picker
                v-model="genreForm.color"
                show-alpha
                :predefine="colorPresets"
              />
              <div class="form-tip">类型的主题色彩</div>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 管理员可以设置是否为默认类型 -->
        <el-form-item label="设为默认类型" v-if="isAdmin">
          <el-switch 
            v-model="genreForm.isDefault"
            :active-value="1"
            :inactive-value="0"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="saveGenre" :loading="isSaving">
            {{ editingGenre ? '保存修改' : '创建类型' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 定义组件名称用于 keep-alive
defineOptions({
  name: 'GenreManagement'
})

import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Edit, Delete, Calendar, Document, MoreFilled, CopyDocument
} from '@element-plus/icons-vue'
import { genreApi } from '../services/novelApi.js'
import EmojiPicker from '../components/EmojiPicker.vue'
import { useAuthStore } from '@/stores/authStore'

// 用户权限
const authStore = useAuthStore()
const currentUser = computed(() => authStore.user)
const isAdmin = computed(() => authStore.isAdmin)

// 响应式数据
const genres = ref([])
const loading = ref(false)
const showCreateDialog = ref(false)
const editingGenre = ref(null)
const formRef = ref()
const tagInput = ref('')
const isSaving = ref(false)

// 表单数据
const genreForm = ref({
  code: '',
  name: '',
  prompt: '',
  tags: [],
  examples: '',
  icon: '📖',
  color: '#409EFF',
  isDefault: 0  // 0-非默认，1-默认（仅管理员可设置）
})

// 颜色预设
const colorPresets = [
  '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
  '#8B5CF6', '#10B981', '#F59E0B', '#3B82F6', '#EF4444', '#EC4899'
]

// 表单验证规则
const genreRules = {
  code: [
    { required: true, message: '请输入类型代码', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+$/, message: '代码只能包含字母、数字、下划线和横线', trigger: 'blur' },
    { validator: validateCodeUnique, trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入类型名称', trigger: 'blur' }
  ],
  prompt: [
    { required: true, message: '请输入创作提示', trigger: 'blur' }
  ]
}

// 验证代码唯一性
function validateCodeUnique(rule, value, callback) {
  if (!value) {
    callback()
    return
  }
  
  const existingGenre = genres.value.find(g => 
    g.code === value && (!editingGenre.value || g.code !== editingGenre.value.code)
  )
  
  if (existingGenre) {
    callback(new Error('类型代码已存在'))
  } else {
    callback()
  }
}

// 检查是否可以编辑类型
const canEditGenre = (genre) => {
  if (!currentUser.value) return false
  
  // 管理员可以编辑所有类型
  if (isAdmin.value) return true
  
  // 普通用户不能编辑默认类型（无论创建者是谁）
  if (genre.isDefault === 1 || genre.isDefault === true) {
    return false
  }
  
  // 普通用户只能编辑自己的类型（通过 userId 判断）
  if (genre.userId) {
    return genre.userId === currentUser.value.id
  }
  
  // 如果没有 userId 信息，默认允许（后端会做最终验证）
  return true
}

// 检查是否可以删除类型
const canDeleteGenre = (genre) => {
  if (!currentUser.value) return false
  
  // 管理员可以删除所有类型
  if (isAdmin.value) return true
  
  // 普通用户不能删除默认类型（无论创建者是谁）
  if (genre.isDefault === 1 || genre.isDefault === true) {
    return false
  }
  
  // 普通用户只能删除自己的类型
  if (genre.userId) {
    return genre.userId === currentUser.value.id
  }
  
  // 如果没有 userId 信息，默认允许（后端会做最终验证）
  return true
}

// 加载默认类型数据（已废弃，现在从服务器获取）
// 保留此函数仅为兼容性，实际不再使用
const loadDefaultGenres = () => {
  // 返回空数组，默认类型现在由管理员在后台动态设置
  return []
}

// 加载类型数据
const loadGenres = async () => {
  try {
    loading.value = true
    // 从后端API加载类型数据
    const response = await genreApi.getGenres()
    console.log('从后端加载类型数据:', response)

    // 处理后端响应数据结构
    let genresData = []
    if (response && response.data) {
      // 如果是标准的 Result 格式 {code, message, data}
      if (Array.isArray(response.data)) {
        genresData = response.data
      } else {
        console.warn('response.data 不是数组格式:', response.data)
        genresData = []
      }
    } else if (response && Array.isArray(response)) {
      // 直接数组格式
      genresData = response
    } else {
      console.warn('未知的响应数据格式:', response)
      genresData = []
    }

    // 处理响应数据，转换为前端需要的格式
    genres.value = genresData.map(genre => ({
      ...genre,
      // 将后端的description字段转换为前端的tags数组
      tags: genre.description ? genre.description.split('、') : [],
      // 确保所有字段存在
      examples: genre.examples || '',
      usageCount: genre.usageCount || 0,
      icon: genre.icon || '📖',
      color: genre.color || '#409EFF',
      isDefault: genre.isDefault === 1,
      createdAt: new Date(genre.createdAt),
      updatedAt: new Date(genre.updatedAt)
    }))

    console.log('从后端加载类型数据:', genres.value.length, '个类型')
  } catch (error) {
    console.error('加载类型数据失败:', error)
    // 如果后端加载失败，尝试从localStorage加载作为备用
    try {
      const saved = localStorage.getItem('novelGenres')
      if (saved) {
        const parsed = JSON.parse(saved)
        genres.value = parsed.map(genre => ({
          ...genre,
          tags: genre.description ? genre.description.split('、') : [],
          examples: genre.examples || '',
          usageCount: genre.usageCount || 0,
          icon: genre.icon || '📖',
          color: genre.color || '#409EFF',
          isDefault: genre.isDefault === 1 || genre.isDefault === true,
          createdAt: genre.createdAt ? new Date(genre.createdAt) : new Date(),
          updatedAt: genre.updatedAt ? new Date(genre.updatedAt) : new Date()
        }))
        ElMessage.warning('类型数据加载失败，使用本地缓存数据')
      } else {
        // 没有本地存储数据，返回空数组
        genres.value = []
        ElMessage.error('类型数据加载失败，请检查网络连接')
      }
    } catch (localError) {
      console.error('本地数据加载也失败:', localError)
      genres.value = []
      ElMessage.error('加载类型数据失败')
    }
  } finally {
    loading.value = false
  }
}

// 保存类型数据
const saveGenres = () => {
  try {
    localStorage.setItem('novelGenres', JSON.stringify(genres.value))
    console.log('类型数据已保存:', genres.value)
  } catch (error) {
    console.error('保存类型数据失败:', error)
    ElMessage.error('保存数据失败')
  }
}

// 编辑类型
const editGenre = (genre) => {
  // 检查权限
  if (!canEditGenre(genre)) {
    ElMessage.warning('您没有权限编辑此类型')
    return
  }
  
  editingGenre.value = genre
  genreForm.value = {
    code: genre.code,
    name: genre.name,
    prompt: genre.prompt,
    tags: [...genre.tags],
    examples: genre.examples || '',
    icon: genre.icon || '📖',
    color: genre.color || '#409EFF',
    isDefault: genre.isDefault === 1 || genre.isDefault === true ? 1 : 0
  }
  showCreateDialog.value = true
}

// 处理类型操作
const handleGenreAction = async (command, genre) => {
  switch (command) {
    case 'duplicate':
      duplicateGenre(genre)
      break
    case 'delete':
      await deleteGenre(genre)
      break
  }
}

// 复制类型
const duplicateGenre = (genre) => {
  genreForm.value = {
    code: `${genre.code}_copy`,
    name: `${genre.name}（副本）`,
    prompt: genre.prompt,
    tags: [...genre.tags],
    examples: genre.examples || '',
    icon: genre.icon || '📖',
    color: genre.color || '#409EFF'
  }
  editingGenre.value = null
  showCreateDialog.value = true
}

// 删除类型
const deleteGenre = async (genre) => {
  // 检查权限
  if (!canDeleteGenre(genre)) {
    ElMessage.warning('您没有权限删除此类型')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除类型"${genre.name}"吗？此操作不可恢复。`,
      '确认删除',
      { type: 'warning' }
    )

    try {
      // 调用后端API删除类型
      await genreApi.deleteGenre(genre.id)

      // 从本地类型列表中移除
      const index = genres.value.findIndex(g => g.id === genre.id)
      if (index > -1) {
        genres.value.splice(index, 1)
        saveGenres() // 同时更新localStorage
        ElMessage.success('类型删除成功')
      }
    } catch (apiError) {
      console.error('删除类型失败:', apiError)
      ElMessage.error('删除类型失败: ' + (apiError.response?.data?.message || apiError.message || '未知错误'))
    }
  } catch (error) {
    // 用户取消删除
  }
}

// 添加标签
const addTag = () => {
  const tag = tagInput.value.trim()
  if (tag && !genreForm.value.tags.includes(tag)) {
    genreForm.value.tags.push(tag)
    tagInput.value = ''
  }
}

// 移除标签
const removeTag = (index) => {
  genreForm.value.tags.splice(index, 1)
}

// 保存类型
const saveGenre = async () => {
  try {
    await formRef.value.validate()
    isSaving.value = true

    // 准备发送到后端的数据
    const genreDataForApi = {
      code: genreForm.value.code,
      name: genreForm.value.name,
      description: genreForm.value.tags.filter(tag => tag.trim()).join('、'), // 将tags数组转换为description字符串
      prompt: genreForm.value.prompt,
      examples: genreForm.value.examples || '',
      icon: genreForm.value.icon || '📖',
      color: genreForm.value.color || '#409EFF',
      usageCount: 0, // 新创建的类型使用次数为0
      isDefault: genreForm.value.isDefault || 0
    }

    if (editingGenre.value) {
      // 编辑现有类型
      const updatedGenre = await genreApi.updateGenre(editingGenre.value.id, genreDataForApi)

      // 更新本地数据
      const index = genres.value.findIndex(g => g.id === editingGenre.value.id)
      if (index > -1) {
        genres.value[index] = {
          ...updatedGenre,
          tags: updatedGenre.description ? updatedGenre.description.split('、') : [],
          examples: updatedGenre.examples || '',
          usageCount: updatedGenre.usageCount || 0,
          icon: updatedGenre.icon || '📖',
          color: updatedGenre.color || '#409EFF',
          isDefault: updatedGenre.isDefault === 1,
          createdAt: new Date(updatedGenre.createdAt),
          updatedAt: new Date(updatedGenre.updatedAt)
        }
      }
      ElMessage.success('类型更新成功')
    } else {
      // 创建新类型
      const newGenre = await genreApi.createGenre(genreDataForApi)

      // 添加到本地类型列表
      genres.value.push({
        ...newGenre,
        tags: newGenre.description ? newGenre.description.split('、') : [],
        examples: newGenre.examples || '',
        usageCount: newGenre.usageCount || 0,
        icon: newGenre.icon || '📖',
        color: newGenre.color || '#409EFF',
        isDefault: newGenre.isDefault === 1,
        createdAt: new Date(newGenre.createdAt),
        updatedAt: new Date(newGenre.updatedAt)
      })
      ElMessage.success('类型创建成功')
    }

    // 保存到localStorage作为备份
    saveGenres()
    showCreateDialog.value = false
    resetForm()
  } catch (error) {
    console.error('保存类型失败:', error)
    ElMessage.error('保存类型失败: ' + (error.message || '未知错误'))
  } finally {
    isSaving.value = false
  }
}

// 重置表单
const resetForm = () => {
  genreForm.value = {
    code: '',
    name: '',
    prompt: '',
    tags: [],
    examples: '',
    icon: '📖',
    color: '#409EFF',
    isDefault: 0
  }
  tagInput.value = ''
  editingGenre.value = null
  formRef.value?.clearValidate()
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 生命周期
onMounted(async () => {
  await loadGenres()
})
</script>

<style scoped>
.genre-management {
  padding: 0;
}

.page-header-container {
  padding: 0 24px 24px 24px;
}

.page-header-card {
  margin-bottom: 0;
}

.page-header-card :deep(.el-card__body) {
  padding: 24px;
}

.genres-container {
  padding: 0 24px;
}

.header-content {
  display: flex;
  flex-direction: column;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  
}

.page-description {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.genres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.genre-item {
  border: none;
  transition: all 0.3s;
}

.genre-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.genre-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.genre-info {
  flex: 1;
}

.genre-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  
  display: flex;
  align-items: center;
  gap: 8px;
}

.genre-icon {
  font-size: 20px;
  display: inline-block;
}

.genre-actions {
  display: flex;
  gap: 8px;
}

.genre-description {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.genre-description p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.genre-tags {
  margin-bottom: 16px;
  min-height: 32px;
}

.genre-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #909399;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tags-input-section {
  width: 100%;
}

.tags-display {
  margin-top: 8px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.emoji-picker {
  width: 100%;
}

.empty-state {
  padding: 60px 24px;
  text-align: center;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header-container {
    padding: 0 16px 24px 16px;
  }

  .genres-container {
    padding: 0 16px;
  }

  .genres-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header-card :deep(.el-row) {
    flex-direction: column;
  }
  
  .page-header-card :deep(.el-col) {
    width: 100% !important;
    margin-bottom: 15px;
  }
  
  .page-header-card :deep(.el-card__body) {
    padding: 16px;
  }
  
  .header-content {
    text-align: center;
  }
  
  .header-actions {
    justify-content: center;
  }
}
</style> 